<script type="text/javascript" src="ccay/example/ui/button/buttons2MenuButton.js"></script>

<div>

<div id="2menu">
	 <div title="效果">
		<div>原始按钮：
				<input onclick="alert(1)" class="init i18n hasPermission" ccayPermission="Service$HtmlArea$create" i18nKey="ccay.common.button.add" type=button />
		    	<input onclick="alert(2)" class="init i18n hasPermission" ccayPermission="Service$HtmlArea$delete"  i18nKey="ccay.common.button.delete" type=button />
	       		<input onclick="alert(3)" class="init i18n hasPermission" ccayPermission="Service$HtmlArea$import" i18nKey="ccay.common.button.import"  type="button" />
	       		<input onclick="alert(4)" class="init i18n hasPermission" ccayPermission="Service$HtmlArea$export" i18nKey="ccay.common.button.export" type="button" />
	    </div>
		<br>
		<div>目标按钮：
				 <div id='2menubutton'></div>
		</div>
	 </div>
	 <div title="转换工具">
		 <table style="width:100%;text-align:center;">
		   <tr>
		     <td style="width:48%;height:100%;vertical-align:top;">
				 <fieldset class='ccay-demo' style="width:95%;min-height:400px;height:100%;display:inline-block">
				    <legend ><h2>来源</h2></legend>
				    <table style="width:100%;text-align:left;">
						<tr>
						   <td>
								<h3>第一步、可粘贴多个type="button"的input的html代码：：</h3>
							  	<textarea id="btnResource1" style="width:99%;height:120px;"></textarea>
							  	<div id="btnResourceDiv1" style="display:none;"></div>
						  </td>
						</tr>
						<tr>
						   <td>
								<h3>第二步、点击右边按钮，为每个按钮选择相应图标：
								<span class="ccay-button" onclick='Ccay.example.ui.buttons2menuBtn.setImgSelector()'>
									<a class="ccay-icon show"></a>
									<label>先点击我</label>
								 </span></h3>
							  	<div id="setImgSelector"></div>
						  </td>
						</tr>
						<tr>
							  <td style="height:30px">
							  	<div id="btnResourceResult1">
							  		<table style="width:100%;text-align:left;" id="myTable"></table>
							  	</div>
							  </td>
						</tr>
						<tr>
							  <td style="height:80px">
							  	<h3>第三步、点击转换按钮，进行转换：
							  	<span class="ccay-button" onclick='Ccay.example.ui.buttons2menuBtn.convert()'>
									<a class="ccay-icon pager-goto"></a>
									<label>再点击我进行转换</label>
								 </span>
								 </h3>
							  </td>
						</tr>
					</table>
				 </fieldset>
			 </td>
			 <td style="width:3%;height:100%;"></td>
			 <td style="width:48%;vertical-align:top;">
				 <fieldset class='ccay-demo' style="width:95%;min-height:400px;display:inline-block">
				    <legend ><h2>结果</h2></legend>
				    <font style="float: left">说明：生成的代码中"按钮集合"，可自行替换为其他的html标签。</font>
				    <table style="width:100%;text-align:left;">
						<tr style="height:180px;">
						  <td style="text-align:left;">
						  	<textarea id="btnTarget1" style="width:99%;height:180px;"></textarea>
						  </td>
						</tr>
						<tr>
						  <td style="height:80px">
						  	<h3>生成效果：</h3>
						  	<div id="btnTargetResult1"></div>
						  </td>
						</tr>
					</table>
				 </fieldset>
			 </td>
		   </tr>
		 </table>
	 </div>
</div>

</div>
